<template>
	<view class="content">
		<virtual-list :items="items" :size="size" :remain="8">
			<template v-slot:default="slotItem">
				<list-item :item="slotItem.item"></list-item>
			</template>
		</virtual-list>
	</view>
</template>

<script>
	import VirtualList from '@/components/VirtualList/VirtualList.vue';

	import VirListItem from '@/components/VirtualList/VirListItem.vue';

	const items = [];

	for (let i = 0; i < 1000; i++) {
		items.push({
			id: i,
			value: `item${i}`
		});
	}

	export default {
		components: {
			VirtualList,
			ListItem
		},
		data() {
			return {
				items,
				size: 0
			};
		},
		onReady() {
			this.size = +uni.upx2px(52);
		}
	};
</script>

<style>
	.scroll-view {
		height: 100vh;
	}
</style>
